AWS WAFのブロック時にカスタムエラーページを表示する
AWS WAFが通信をブロックすると、ユーザーには「403 Forbidden」という味気ないメッセージが表示されます。CloudFrontのカスタムエラーページを使うと、ユーザーが用意したhtmlファイルの内容を表示できます。
標準のエラー画面
WAFがブロックすると、ブラウザには「403 Forbidden」と表示されます。一般のエンドユーザーにはわかりづらいかもしれません。
ご紹介するカスタムエラーページを使うと、以下のようにユーザーが用意した内容を表示できます。
構成図
カスタムエラーページの表示にはCloudFrontとS3を使います。S3に「forbidden.html」をアップロードしておきます。検証環境では、ALBにWAFを適用しました。
forbidden.htmlは以下の内容で、S3バケット直下に配置しました。
<!DOCTYPE html> <html> <head> <title>403</title> <meta http-equiv="content-type" charset="utf-8"> </head> <body> <h1>403エラー</h1> <p>myname@example.jpまでご連絡ください</p> </body> </html>
CloudFrontの設定
ALBオリジンと、S3オリジンを作成します。
BehaviorsではデフォルトをALBオリジンに、forbidden.htmlはS3オリジンにルーティングします。
Custom Error Responseの設定です。AWS WAFでブロックすると、ALBはHTTPステータス403を返します。カスタムエラーページで403の時に、 /forbidden.htmlを表示させます。
以上で設定完了です。
動作確認用のWAFルールを作成する
参考までに、動作確認のルールの作り方をご紹介します。Stringコンディションを作成します。URIにtabooが含まれているかという条件にしました。
ルールを作成し、先ほど作成したコンディションをdoesで指定します。URIにtabooが含まれている時に一致するルールになります。
WebACLで作成したルールをBlock requestsにします。
https://www.example/tabooのようにtabooをつけて接続すると、AWS WAFでブロックされます。
注意点
CloudFrontは、オリジンによって返された403と、AWS WAFが返す403を区別できません。ステータスコード403で複数のエラーページを表示できません。アプリケーションが出す403とAWS WAFが出す403は同じエラーページを表示することになります。
最後に
AWS WAFで誤ってユーザーの正しい通信をブロックした際に、カスタムエラーページを表示する方法をご紹介しました。
![[アップデート] AWS Amplify のファイアウォール（WAF）機能がついにプレビューで登場しました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-875a3d2bbdba43ad15684c9ee2e357b1/c77a61f7c646b6997c54cc55538ec251/aws-amplify)
